<template>
<el-dialog width="35%" v-model="dialogVisible" :modal="true" @closed="finalThings" title="提现">
    <el-form :rules="rules" ref="elForm" :model="data" size="default">
        <div class="withdrawal-row">
            <div class="withdrawal-row-label">账户余额:</div>
            <span>{{ amount_online }}元</span>
        </div>
        <el-form-item label="提现金额: " prop="amount">
            <el-input type="text" v-model="data.amount" v-digit-only>
                <template #append>元</template>
            </el-input>
        </el-form-item>
        <el-form-item label="提现密码: " prop="password">
            <el-input :type="isChrome?'text':'password'"
            autocomplete="off" 
            v-model="data.password"
            style="-webkit-text-security:disc;"
            ></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
            <el-button type="primary" size="default" @click="onSure" :disabled="operation">保存</el-button>
            <el-button size="default" @click="onCancel">取消</el-button>
        </template>
</el-dialog>
</template>         
<script>
import { reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus';
import axios from "axios";
import directives from "../../../uiframe/services/directives";

export default {
    directives,
    props:{
        q:Object,
        _compId:Number,
        done:Function,
        payload: Object,
        amount_online:Number
    },
    mounted() {
        let nav = window.navigator.userAgent
        if (nav.includes('chrome')>-1){
            this.isChrome = true
        } else {
            this.isChrome = false
        }
    },
    setup(props) {
        let data = reactive({
            dialogVisible:true,
            data:[],
            operation:false,
            elForm:null,
            isChrome:true,
            rules:{
                amount: [{ required: true, message: "提现金额必填", trigger: "blur" }],
                password:[{required:true,message:'提现密码必填', trigger:'blur'}]
            }
        });

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onCancel:()=>data.dialogVisible = false,
            finalThings:()=>{props.done(props._compId)},
            onSure:()=> {
                data.operation = true;
                data.elForm.validate().then((ret) => {
                    if(!ret) {
                        data.operation = false;
                        return;
                    }

                    let d=data.data,balance = props.amount_online,a=parseInt(data.data.amount);
                    if(a > balance){
                        onmessage({succedss:false,message:'您的账户余额不足！'})
                        data.operation = false;
                        return
                    }

                    axios.post('/goods_cashout/withdrawal', {amount:a,password:d.password}).then(({data:res})=>{
                        onmessage(res);
                        if(res.success){
                            props.q.resolve({success:true,message:'已保存', data:{amount:a}})
                            data.dialogVisible = false;
                        }
                        data.operation = false;
                    }).catch(res=>{
                        onmessage(res);
                        data.operation = false;
                    })
                }).catch(res=>{
                    data.operation = false;
                })
            }
        }

        return {
            ...toRefs(data),
            ...methods
        }
    },
}
</script>
<style lang="scss">
.withdrawal-row{
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 18px;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    .withdrawal-row-label{
        width: 70px;
        padding-right: 12px;
        text-align: right;
    }
}
</style>